/*
 * @Description: 预定义原子类
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2021-09-01 16:37:47
 * @LastEditTime: 2025-08-03 16:48:40
 */

// 前期考虑：由于是后管系统，又使用element-plus（使用px），尺寸宽度无需响应式，直接使用px像素就可以
// 若为移动端可以使用rpx或rem

// 配置变量
$spacing-scale: (
  0: 0,
  1: 1,
  2: 2px,
	3: 3px,
  4: 4px,
  5: 5px,
  6: 6px,
  7: 7px,
  8: 8px,
  9: 9px,
  10: 10px,
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  22: 22px,
  24: 24px,
  26: 26px,
  28: 28px,
  30: 30px,
  32: 32px,
  34: 34px,
  36: 36px,
  38: 38px,
  40: 40px,
  42: 42px,
  44: 44px,
  46: 46px,
  48: 48px,
  50: 50px,
  52: 52px,
  56: 56px,
  60: 60px,
  64: 64px,
  68: 68px,
  72: 72px,
  76: 76px,
  80: 80px,
  84: 84px,
  88: 88px,
  92: 92px,
  96: 96px,
  100: 100px,
);

$colors: (
  primary: var(--el-color-primary),
  secondary: #6366f1,
  success: #10b981,
  danger: #ef4444,
  warning: #f59e0b,
  info: #06b6d4,
  dark: #1f2937,
  light: #f3f4f6,
  white: #ffffff,
  black: #000000,
);

$font-sizes: (
  xs: 12px,
  sm: 13px,
  base: 14px,
  lg: 16px,
  xl: 18px,
  '2xl': 20px,
  '3xl': 24px,
  '4xl': 28px,
  '5xl': 36px,
  '6xl': 44px,
  '7xl': 52px,
);

$font-weights: (
  100: 100,
  300: 300,
  400: 400,
  500: 500,
  600: 600,
  700: 700,
  900: 900,
  thin: 100,
  light: 300,
  normal: 400,
  medium: 500,
  bold: 700,
  bolder: 900,
);

// 生成间距类
@mixin generate-spacing-classes() {
  // 外边距
  @each $name, $value in $spacing-scale {
    .m-#{$name} {
      margin: $value !important;
    }
    
    .mt-#{$name} {
      margin-top: $value !important;
    }
    
    .mr-#{$name} {
      margin-right: $value !important;
    }
    
    .mb-#{$name} {
      margin-bottom: $value !important;
    }
    
    .ml-#{$name} {
      margin-left: $value !important;
    }
    
    .mlr-#{$name} {
      margin-left: $value !important;
      margin-right: $value !important;
    }
    
    .mtb-#{$name} {
      margin-top: $value !important;
      margin-bottom: $value !important;
    }
  }
  
  // 内边距
  @each $name, $value in $spacing-scale {
    .p-#{$name} {
      padding: $value !important;
    }
    
    .pt-#{$name} {
      padding-top: $value !important;
    }
    
    .pr-#{$name} {
      padding-right: $value !important;
    }
    
    .pb-#{$name} {
      padding-bottom: $value !important;
    }
    
    .pl-#{$name} {
      padding-left: $value !important;
    }
    
    .plr-#{$name} {
      padding-left: $value !important;
      padding-right: $value !important;
    }
    
    .ptb-#{$name} {
      padding-top: $value !important;
      padding-bottom: $value !important;
    }
  }
}

// 生成尺寸类
@mixin generate-size-classes() {
  @each $name, $value in $spacing-scale {
    .w-#{$name} {
      width: $value !important;
    }
    
    .h-#{$name} {
      height: $value !important;
    }
  }
  
  // 特殊尺寸
  .w-full {
    width: 100% !important;
  }
  
  .h-full {
    height: 100% !important;
  }
  
  .w-screen {
    width: 100vw !important;
  }
  
  .h-screen {
    height: 100vh !important;
  }
  
  .w-auto {
    width: auto !important;
  }
  
  .h-auto {
    height: auto !important;
  }
}

// 生成颜色类
@mixin generate-color-classes() {
  @each $name, $value in $colors {
    .color-#{""+$name} {
      color: $value !important;
    }
    
    .bg-#{""+$name} {
      background-color: $value !important;
    }
    
    .border-#{""+$name} {
      border-color: $value !important;
    }
  }
}

// 生成排版类
@mixin generate-typography-classes() {
  // 字体大小
  @each $name, $value in $font-sizes {
    .font-#{$name} {
      font-size: $value !important;
    }
  }
  
  // 字体粗细
  @each $name, $value in $font-weights {
    .font-weight-#{$name} {
      font-weight: $value !important;
    }
  }
  
  // 文本对齐
  .text-left {
    text-align: left !important;
  }
  
  .text-center {
    text-align: center !important;
  }
  
  .text-right {
    text-align: right !important;
  }
  
  // 文本装饰
  .text-underline {
    text-decoration: underline !important;
  }
  
  .text-none {
    text-decoration: none !important;
  }
  
  // 文本转换
  .uppercase {
    text-transform: uppercase !important; // 大写
  }
  
  .lowercase {
    text-transform: lowercase !important; // 小写
  }
  
  .capitalize {
    text-transform: capitalize !important;  // 驼峰
  }
}

// 生成布局类
@mixin generate-layout-classes() {
  // 显示
  .block {
    display: block !important;
  }
  
  .inline {
    display: inline !important;
  }
  
  .inline-block {
    display: inline-block !important;
  }
  
  .flex {
    display: flex !important;
  }
  
  .inline-flex {
    display: inline-flex !important;
  }
  
  .grid {
    display: grid !important;
  }
  
  .hidden {
    display: none !important;
  }
  
  // Flex 布局
  .flex-column{
    flex-direction: column!important;
  }

  .flex-row {
    flex-direction: row !important;
  }

  .flex-center{
    justify-content: center!important;
    align-items: center!important;
  }

  .flex-j-center{
    justify-content: center!important;
  }

  .flex-j-bt{
    justify-content: space-between!important;
  }

  .flex-j-ar{
    justify-content: space-around!important;
  }

  .flex-j-start{
    justify-content: flex-start!important;
  }

  .flex-j-end{
    justify-content: flex-end!important;
  }

  .flex-a-start{
    align-items: flex-start!important;
  }

  .flex-a-end{
    align-items: flex-end!important;
  }

  .flex-a-center{
    align-items: center!important;
  }

  .flex-wrap{
    flex-wrap: wrap!important;
  }  

  .flex-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-row-reverse {
    flex-direction: row-reverse !important;
  }
  
  .flex-col-reverse {
    flex-direction: column-reverse !important;
  }
}

// 生成边框类
@mixin generate-border-classes() {
  .border {
    border-width: 1px !important;
    border-style: solid !important;
  }
  
  .border-0 {
    border-width: 0 !important;
  }
  
  .border-top {
    border-top-width: 1px !important;
    border-top-style: solid !important;
  }
  
  .border-right {
    border-right-width: 1px !important;
    border-right-style: solid !important;
  }
  
  .border-bottom {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
  }
  
  .border-left {
    border-left-width: 1px !important;
    border-left-style: solid !important;
  }
  
  // 圆角
  @for $i from 1 through 5 {
    .radius-#{2 * $i} { 
      border-radius: 2px * $i!important;
    }
  }
  
  .radius-full {
    border-radius: 50% !important;
  }
  
  .radius-0 {
    border-radius: 0 !important;
  }
}

// 生成所有工具类
@include generate-spacing-classes();
@include generate-size-classes();
@include generate-color-classes();
@include generate-typography-classes();
@include generate-layout-classes();
@include generate-border-classes();
